/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/8/15 6:13 下午
 * @version V1.0
 */
import React, { useEffect } from "react";
import styles from "./index.less";
import SectionTitle from "components/SectionTitle";
import FilterByKeyWord from "components/FilterByKeyWord";
import { Table, Button, Tag } from "antd";
import { connect, Link } from "umi";
import storageUtils from "utils/storage";

const Examination = ({ Examination: { dataSource, keyword }, dispatch, loading }) => {
    const isAdmin = storageUtils.getUser().userRoleTypes.includes("Admin");

    useEffect(() => {
        dispatch({
            type: "Examination/getDataSource",
            payload: {
                keyword
            }
        });
    }, []);
    const searchByKeyWord = (keyword) => {
        dispatch({
            type: "Examination/getDataSource",
            payload: {
                keyword
            }
        });
    };
    const setDefaultExaminations = (item) => {
        dispatch({
            type: "Examination/setDefaultEvaluate",
            payload: { evaluateExamId: item.evaluateExamId },
            callback: (result) => {
                if (result) {
                    dispatch({
                        type: "Examination/getDataSource",
                        payload: {
                            keyword
                        }
                    });
                }
            }
        });
    };
    const columns = [
        {
            title: "方案编号",
            dataIndex: "examNo",
            align: "left"
        },
        {
            title: "方案名称",
            dataIndex: "examName",
            align: "left"
        },
        {
            title: "方案类型",
            dataIndex: "evaluateQuestionType",
            align: "left"
        },
        {
            title: "是否默认",
            dataIndex: "defaultExam",
            align: "left",
            render(defaultExam) {
                if (defaultExam) {
                    return <Tag color="#095083">是</Tag>;
                } else {
                    return <Tag color="#f50">否</Tag>;
                }
            }
        },
        {
            title: "备注",
            dataIndex: "comment",
            align: "left"
        },
        {
            title: "操作",
            align: "left",
            render(item) {
                return (
                    <div>
                        {
                            isAdmin ?
                                <Button type="link"
                                        style={{ color: item.defaultExam ? "red" : "#105F92" }}
                                        onClick={() => setDefaultExaminations(item)}>{item.defaultExam ? "取消默认" : "设为默认"}</Button> : null
                        }
                        <Link to={`examination/${item.evaluateExamId}`}>查看方案</Link>
                    </div>
                );
            }
        }
    ];
    return (
        <div className={styles.examinationContainer}>
            <SectionTitle title={"方案浏览"}/>
            <FilterByKeyWord onSearch={keyword => searchByKeyWord(keyword)}
                             onReset={keyword => searchByKeyWord(keyword)}/>
            <div className={styles.tableContainer}>
                <Table
                    bordered={false} // 是否有边框
                    rowKey='evaluateExamId' // 唯一key值
                    loading={loading} // 加载动画
                    columns={columns} // 表头
                    dataSource={dataSource}
                    pagination={false}
                />
            </div>
        </div>
    );
};

export default connect(({ Examination, dispatch, loading }) => ({
    Examination,
    dispatch,
    loading: loading.effects["Examination/getDataSource"]
}))(Examination);

